<!--
 * @Author: zhuxiaoyi
 * @Date: 2024-01-09 10:50:36
 * @LastEditor: zhuxiaoyi
 * @LastEditTime: 2025-09-19 12:02:32
 * @Description: 减灾中心导航页面
-->
<template>
    <div class="nav-container" :style="{ height: view.height + 'px' }">
        <!-- 背景装饰 -->
        <div class="bg-decoration">
            <div class="circle circle-1"></div>
            <div class="circle circle-2"></div>
            <div class="circle circle-3"></div>
        </div>

        <!-- 主要内容 -->
        <div class="main-content">
            <!-- 标题区域 -->
            <div class="header-section">
                <div class="logo-area">
                    <div class="logo-icon">
                        <svg width="60" height="60" viewBox="0 0 60 60" fill="none">
                            <rect width="60" height="60" rx="12" fill="url(#gradient1)" />
                            <path d="M30 15L45 25V45H15V25L30 15Z" stroke="white" stroke-width="2" fill="none" />
                            <circle cx="30" cy="32" r="8" stroke="white" stroke-width="2" fill="none" />
                            <defs>
                                <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
                                    <stop offset="0%" style="stop-color:#667eea" />
                                    <stop offset="100%" style="stop-color:#764ba2" />
                                </linearGradient>
                            </defs>
                        </svg>
                    </div>
                    <h1 class="main-title">减灾中心信息系统</h1>
                    <p class="subtitle">Disaster Reduction Center Information System</p>
                </div>
            </div>

            <!-- 导航卡片区域 -->
            <div class="cards-section">
                <div class="nav-cards">
                    <!-- 管理系统卡片 -->
                    <div class="nav-card management-card" @click="goToManagement">
                        <div class="card-icon">
                            <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
                                <rect width="48" height="48" rx="8" fill="#409EFF" />
                                <path d="M24 12L36 18V36H12V18L24 12Z" stroke="white" stroke-width="2" fill="none" />
                                <path d="M16 22H32M16 26H32M16 30H28" stroke="white" stroke-width="1.5" />
                            </svg>
                        </div>
                        <div class="card-content">
                            <h2 class="card-title">减灾中心外协人员管理系统</h2>
                            <p class="card-description">管理外协人员信息、项目分配、考勤统计等</p>
                            <div class="card-features">
                                <span class="feature-tag">人员管理</span>
                                <span class="feature-tag">项目管理</span>
                                <span class="feature-tag">数据统计</span>
                            </div>
                        </div>
                        <div class="card-arrow">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M9 18L15 12L9 6" stroke="#409EFF" stroke-width="2" />
                            </svg>
                        </div>
                    </div>

                    <!-- 任务发布平台卡片 -->
                    <div class="nav-card task-card" @click="goToTaskPlatform">
                        <div class="card-icon">
                            <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
                                <rect width="48" height="48" rx="8" fill="#E6A23C" />
                                <path d="M12 16H36V36H12V16Z" stroke="white" stroke-width="2" fill="none" />
                                <path d="M16 12V20M32 12V20" stroke="white" stroke-width="2" />
                                <path d="M18 24L22 28L30 20" stroke="white" stroke-width="2" fill="none" />
                                <circle cx="38" cy="10" r="4" fill="white" />
                                <path d="M36 10H40M38 8V12" stroke="#E6A23C" stroke-width="1.5" />
                            </svg>
                        </div>
                        <div class="card-content">
                            <h2 class="card-title">减灾中心外协任务发布平台</h2>
                            <p class="card-description">发布外协任务、需求管理、进度跟踪等</p>
                            <div class="card-features">
                                <span class="feature-tag">任务发布</span>
                                <span class="feature-tag">需求管理</span>
                                <span class="feature-tag">进度跟踪</span>
                            </div>
                        </div>
                        <div class="card-arrow">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M9 18L15 12L9 6" stroke="#E6A23C" stroke-width="2" />
                            </svg>
                        </div>
                    </div>
                    <!-- 服务平台卡片 -->
                    <div class="nav-card service-card" @click="goToService">
                        <div class="card-icon">
                            <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
                                <rect width="48" height="48" rx="8" fill="#67C23A" />
                                <circle cx="24" cy="18" r="6" stroke="white" stroke-width="2" fill="none" />
                                <path d="M12 40C12 32 17 28 24 28C31 28 36 32 36 40" stroke="white" stroke-width="2"
                                    fill="none" />
                                <path d="M32 20L40 20M36 16L36 24" stroke="white" stroke-width="2" />
                            </svg>
                        </div>
                        <div class="card-content">
                            <h2 class="card-title">减灾中心外协人员服务平台</h2>
                            <p class="card-description">外协人员自助服务、信息查询、在线申请等</p>
                            <div class="card-features">
                                <span class="feature-tag">自助服务</span>
                                <span class="feature-tag">信息查询</span>
                                <span class="feature-tag">在线申请</span>
                            </div>
                        </div>
                        <div class="card-arrow">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M9 18L15 12L9 6" stroke="#67C23A" stroke-width="2" />
                            </svg>
                        </div>
                    </div>

                </div>
            </div>

            <!-- 底部信息 -->
            <div class="footer-section">
                <p class="footer-text">© 2024 减灾中心信息系统 | 版本 v2.1.0</p>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { defineComponent, reactive, ref, toRefs, onMounted, watch } from "vue";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
const router = useRouter()
onMounted(() => {
    // 页面加载完成后的初始化操作
});

const view = reactive({
    height: window.innerHeight,
});

// 窗口大小变化监听
window.onresize = () => {
    view.height = window.innerHeight;
};

// 跳转到管理系统
const goToManagement = () => {
    ElMessage.success('正在跳转到外协人员管理系统...');
    // 这里添加实际的跳转逻辑
    // window.location.href = '/management';
    router.push('/management');
};

// 跳转到服务平台
const goToService = () => {
    ElMessage.success('正在跳转到外协人员服务平台...');
    // 这里添加实际的跳转逻辑
    // window.location.href = '/service';
    router.push('/service');
};

// 跳转到任务发布平台
const goToTaskPlatform = () => {
    ElMessage.success('正在跳转到外协任务发布平台...');
    // 这里添加实际的跳转逻辑
    // window.location.href = '/task-platform';
    router.push('/publish');
};
</script>

<style lang="scss" scoped>
.nav-container {
    position: relative;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.bg-decoration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;

    .circle {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);

        &.circle-1 {
            width: 200px;
            height: 200px;
            top: 10%;
            right: 15%;
            animation: float 6s ease-in-out infinite;
        }

        &.circle-2 {
            width: 150px;
            height: 150px;
            bottom: 20%;
            left: 10%;
            animation: float 8s ease-in-out infinite reverse;
        }

        &.circle-3 {
            width: 100px;
            height: 100px;
            top: 60%;
            right: 25%;
            animation: float 10s ease-in-out infinite;
        }
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }
}

// 主要修改的样式部分
.main-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1400px; // 增加最大宽度以容纳更大屏幕
    padding: 40px 20px;
    text-align: center;
}

.cards-section {
    margin-bottom: 60px;

    .nav-cards {
        display: flex;
        gap: 30px;
        justify-content: center;
        flex-wrap: wrap;

        // 确保在大屏幕下不换行
        @media (min-width: 1200px) {
            flex-wrap: nowrap;
            max-width: 1200px;
            margin: 0 auto;
        }
    }

    .nav-card {
        background: white;
        border-radius: 16px;
        padding: 32px;
        width: 380px;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        gap: 24px;
        position: relative;
        overflow: hidden;

        // 在超大屏幕上稍微调整卡片宽度
        @media (min-width: 1600px) {
            width: 400px;
            max-width: 400px;
        }

        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            transition: all 0.3s ease;
        }

        &.management-card::before {
            background: linear-gradient(90deg, #409EFF 0%, #5DADE2 100%);
        }

        &.service-card::before {
            background: linear-gradient(90deg, #67C23A 0%, #85E085 100%);
        }

        &.task-card::before {
            background: linear-gradient(90deg, #E6A23C 0%, #F39C12 100%);
        }

        &:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .card-icon {
            flex-shrink: 0;
        }

        .card-content {
            flex: 1;
            text-align: left;

            .card-title {
                font-size: 20px;
                font-weight: 600;
                color: #303133;
                margin: 0 0 8px 0;
                line-height: 1.3;
            }

            .card-description {
                font-size: 14px;
                color: #606266;
                margin: 0 0 16px 0;
                line-height: 1.5;
            }

            .card-features {
                display: flex;
                gap: 8px;
                flex-wrap: wrap;

                .feature-tag {
                    background: #f5f7fa;
                    color: #606266;
                    padding: 4px 8px;
                    border-radius: 4px;
                    font-size: 12px;
                    font-weight: 500;
                }
            }
        }

        .card-arrow {
            flex-shrink: 0;
            opacity: 0.6;
            transition: all 0.3s ease;
        }

        &:hover .card-arrow {
            opacity: 1;
            transform: translateX(4px);
        }
    }
}

// 响应式设计 - 保持原有的媒体查询，并添加新的
@media (min-width: 1920px) {
    .main-content {
        max-width: 1600px; // 在超大屏幕上允许更大的容器
    }

    .nav-cards {
        gap: 40px; // 在大屏幕上增加间距

        .nav-card {
            width: 420px; // 在1920分辨率下增加卡片宽度
        }
    }
}

@media (min-width: 1200px) and (max-width: 1919px) {
    .nav-cards {
        .nav-card {
            width: 360px; // 在中等大屏幕上稍微减少宽度确保横向排列
        }
    }
}

@media (max-width: 1199px) {
    .main-content {
        max-width: 1024px;
    }

    .nav-cards {
        .nav-card {
            width: 350px;
        }
    }
}

@media (max-width: 768px) {
    .main-content {
        padding: 20px 16px;
    }

    .header-section {
        margin-bottom: 40px;

        .main-title {
            font-size: 28px;
        }

        .subtitle {
            font-size: 14px;
        }
    }

    .cards-section {
        margin-bottom: 40px;

        .nav-cards {
            gap: 20px;
        }

        .nav-card {
            width: 100%;
            padding: 24px;
            flex-direction: column;
            text-align: center;

            .card-content {
                text-align: center;

                .card-features {
                    justify-content: center;
                }
            }
        }
    }

    .bg-decoration .circle {
        &.circle-1 {
            width: 120px;
            height: 120px;
        }

        &.circle-2 {
            width: 80px;
            height: 80px;
        }

        &.circle-3 {
            width: 60px;
            height: 60px;
        }
    }
}

@media (max-width: 480px) {
    .nav-card {
        .card-title {
            font-size: 18px;
        }

        .card-description {
            font-size: 13px;
        }
    }
}
</style>

<style lang="scss">
// 全局样式重置
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
        sans-serif;
}
</style>